<template>
  <div class="search" style="height: 100%; display: flex; flex-direction: column">
    <Card class="mt_10 clearfix">
      <div class="div-content" style="">
      </div>
    </Card>
    <Card class="mt_10" style="flex: 1; height: 100%">
      <Tabs :value="selectedTab" @on-click="handleClickType">
        <TabPane label="转出" name="out">
          <Form ref="outSearchForm" @keydown.enter.native="Search" :model="outSearchForm" inline :label-width="60"
            class="search-form">
            <Form-item label="支出钱包" prop="paymentWallet">
              <Select v-model="outSearchForm.paymentWallet" placeholder="全部钱包" clearable style="width: 160px">
                <Option value="SALE">销售钱包</Option>
                <Option value="PROMOTE">推广钱包</Option>
              </Select>
            </Form-item>
            <Form-item label="时间">
              <DatePicker v-model="outSelectDate" type="datetimerange" format="yyyy-MM-dd" clearable
                @on-change="selectDateChangeOut" placeholder="选择起始时间" style="width: 200px">
              </DatePicker>
            </Form-item>
            <Form-item label="收款人手机号" prop="payeePhone" :label-width="100">
              <Input type="text" v-model="outSearchForm.payeePhone" placeholder="请输入手机号" clearable
                style="width: 160px" />
            </Form-item>
            <Form-item label="区域" prop="region">
              <region ref="regionOut" style="width: 350px" @selected="selectedRegionSearchOut" />
            </Form-item>
            <Form-item label="级别" prop="payeeGradeName">
              <Select v-model="outSearchForm.payeeGradeName" placeholder="级别" clearable style="width: 160px">
                <Option value="金卡会员">金卡会员</Option>
                <Option value="银卡会员">银卡会员</Option>
                <Option value="普通用户">普通用户</Option>
              </Select>
            </Form-item>
            <Button @click="getOutDataList" type="primary" icon="ios-search" class="search-btn">搜索</Button>
            <Button @click="handleResetOut" type="primary" class="search-btn">重置</Button </Form>
          </Form>
          <Table :loading="outLoading" border :columns="outColumns" :data="outData" ref="outTable" sortable="custom"
            style="margin-top: 10px"></Table>
          <Row type="flex" justify="end" class="mt_10">
            <Page :current="outSearchForm.pageNumber" :total="outTotal" :page-size="outSearchForm.pageSize"
              @on-change="changePageOut" @on-page-size-change="changePageSizeOut" :page-size-opts="[10, 20, 50, 100]"
              size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </TabPane>
        <TabPane label="转入" name="in">
          <Form ref="inSearchForm" @keydown.enter.native="Search" :model="inSearchForm" inline :label-width="60"
            class="search-form">
            <Form-item label="支出钱包" prop="paymentWallet">
              <Select v-model="inSearchForm.paymentWallet" placeholder="全部钱包" clearable style="width: 160px">
                <Option value="RECHARGE">充值钱包</Option>
                <Option value="PROMOTE_HY">推广钱包余额-会员费</Option>
                <Option value="PROMOTE_FW">推广钱包余额-服务费</Option>
              </Select>
            </Form-item>
            <Form-item label="时间">
              <DatePicker v-model="inSelectDate" type="datetimerange" format="yyyy-MM-dd" clearable
                @on-change="selectDateChangeIn" placeholder="选择起始时间" style="width: 200px">
              </DatePicker>
            </Form-item>
            <Form-item label="收款人手机号" prop="payeePhone" :label-width="100">
              <Input type="text" v-model="inSearchForm.payeePhone" placeholder="请输入手机号" clearable
                style="width: 160px" />
            </Form-item>
            <Form-item label="区域" prop="region">
              <region ref="regionIn" style="width: 350px" @selected="selectedRegionSearchIn" />
            </Form-item>
            <Form-item label="级别" prop="payeeGradeName">
              <Select v-model="inSearchForm.payeeGradeName" placeholder="级别" clearable style="width: 160px">
                <Option value="金卡会员">金卡会员</Option>
                <Option value="银卡会员">银卡会员</Option>
                <Option value="普通用户">普通用户</Option>
              </Select>
            </Form-item>
            <Button @click="getInDataList" type="primary" icon="ios-search" class="search-btn">搜索</Button>
            <Button @click="handleResetIn" type="primary" class="search-btn">重置</Button </Form>
          </Form>
          <Table :loading="inLoading" border :columns="inColumns" :data="inData" ref="inTable" sortable="custom"
            style="margin-top: 10px"></Table>
          <Row type="flex" justify="end" class="mt_10">
            <Page :current="inSearchForm.pageNumber" :total="inTotal" :page-size="inSearchForm.pageSize"
              @on-change="changePageIn" @on-page-size-change="changePageSizeIn" :page-size-opts="[10, 20, 50, 100]"
              size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
  import {
    PlantTransferList
  } from "@/api/financial.js"
  import region from "@/views/lili-components/region-every";
  export default {
    components: {
      region
    },
    data() {
      return {
        all: 0,
        inSelectDate: [], // 创建时间
        outSelectDate: [], // 创建时间
        inLoading: false, //加载表格
        outLoading: false, //加载表格
        selectedTab: "out",
        outSearchForm: {
          // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          startTime: "", // 起始时间
          endTime: "", // 终止时间
          paymentWallet: "",
          payeeGradeName: "",
          payeePhone: '',
        },
        inSearchForm: {
          // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          startTime: "", // 起始时间
          endTime: "", // 终止时间
          paymentWallet: "",
          payeeGradeName: "",
          payeePhone: '',
        },
        outColumns: [{
            title: '序号',
            type: "index",
            width: '80',
            align: 'center'
          }, {
            title: "订单号",
            key: "sn",
            minWidth: 240,
            tooltip: true,
          }, {
            title: "转账时间",
            key: "createTime",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "转账焕贝额",
            key: "transferMoney",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "转账手续费",
            key: "commission",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "支出钱包",
            minWidth: 200,
            tooltip: true,
            render: (h, params) => {
              if (params.row.paymentWallet == "SALE") {
                return h("Span", {}, "销售钱包");
              } else if (params.row.paymentWallet == "PROMOTE") {
                return h("Span", {}, "推广钱包");
              }
            },
          },
          {
            title: "收款人手机号",
            key: "payeePhone",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人姓名",
            key: "payeeName",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人区域",
            key: "payeeRegion",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人级别",
            key: "payeeGradeName",
            minWidth: 200,
            tooltip: true,
          },
        ],
        inColumns: [{
            title: '序号',
            type: "index",
            width: '80',
            align: 'center'
          }, {
            title: "订单号",
            key: "sn",
            minWidth: 240,
            tooltip: true,
          }, {
            title: "转账时间",
            key: "createTime",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "转账焕贝额",
            key: "transferMoney",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "支出钱包",
            minWidth: 200,
            tooltip: true,
            render: (h, params) => {
              if (params.row.paymentWallet == "RECHARGE") {
                return h("Span", {}, "充值钱包");
              } else if (params.row.paymentWallet == "PROMOTE_HY") {
                return h("Span", {}, "推广钱包余额-会员费");
              } else if (params.row.paymentWallet == "PROMOTE_FW") {
                return h("Span", {}, "推广钱包余额-服务费");
              }
            },
          },
          {
            title: "收款人手机号",
            key: "payeePhone",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人姓名",
            key: "payeeName",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人区域",
            key: "payeeRegion",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人级别",
            key: "payeeGradeName",
            minWidth: 200,
            tooltip: true,
          },
        ],
        outData: [], // 支出表单数据
        inData: [], // 收入表单数据
        inTotal: 0, // 收入表单数据总数
        outTotal: 0, // 支出表单数据总数
      };
    },
    created() {
      this.getOutDataList();
    },
    methods: {
      // 选中的地址
      selectedRegionSearchIn(val) {
        let ids = val[0];
        if (ids.length == 0) {
          this.inSearchForm.regionId = ''
        } else {
          this.inSearchForm.regionId = ids[ids.length - 1];
        }
      },
      // 选中的地址
      selectedRegionSearchOut(val) {
        let ids = val[0];
        if (ids.length == 0) {
          this.outSearchForm.regionId = ''
        } else {
          this.outSearchForm.regionId = ids[ids.length - 1];
        }
      },
      selectDateChangeOut(v) {
        if (v) {
          this.outSearchForm.startTime = v[0];
          this.outSearchForm.endTime = v[1];
        }
      },
      selectDateChangeIn(v) {
        if (v) {
          this.inSearchForm.startTime = v[0];
          this.inSearchForm.endTime = v[1];
        }
      },
      // 分页 改变页码
      changePageIn(v) {
        this.inSearchForm.pageNumber = v;
        this.getInDataList();
      },
      // 分页 改变页码
      changePageOut(v) {
        this.outSearchForm.pageNumber = v;
        this.getOutDataList();
      },
      // 分页 改变页数
      changePageSizeIn(v) {
        this.inSearchForm.pageNumber = 1;
        this.inSearchForm.pageSize = v;
        this.getInDataList();
      },
      // 分页 改变页数
      changePageSizeOut(v) {
        this.outSearchForm.pageNumber = 1;
        this.outSearchForm.pageSize = v;
        this.getOutDataList();
      },
      //切换tab
      handleClickType(val) {
        console.log(val, "vvvvvvvvvvvv");
        this.inSearchForm.pageNumber = 1; // 当前页数
        this.inSearchForm.pageSize = 10; // 页面大小
        this.outSearchForm.pageNumber = 1; // 当前页数
        this.outSearchForm.pageSize = 10; // 页面大小
        this.selectedTab = val;
        switch (val) {
          case "out":
            this.getOutDataList();
            break;
          case "in":
            this.getInDataList();
            break;
          default:
            break;
        }
      },
      handleSearchIn() {
        this.inSearchForm.pageNumber = 1;
        this.inSearchForm.pageSize = 10;
        this.getInDataList();
      },
      handleSearchOut() {
        this.outSearchForm.pageNumber = 1;
        this.outSearchForm.pageSize = 10;
        this.getOutDataList();
      },
      // 起止时间从新赋值
      outSelectDateRange(v) {
        if (v) {
          this.outSearchForm.startTime = v[0];
          this.outSearchForm.endTime = v[1];
        }
      },
      // 起止时间从新赋值
      inSelectDateRange(v) {
        if (v) {
          this.inSearchForm.startTime = v[0];
          this.inSearchForm.endTime = v[1];
        }
      },
      handleResetOut() {
        this.outSearchForm.pageNumber = 1 // 当前页数
        this.outSearchForm.pageSize = 10 // 页面大小
        this.outSearchForm.startTime = "" // 起始时间
        this.outSearchForm.endTime = "" // 终止时间
        this.outSearchForm.payeeGradeName = ''
        this.outSearchForm.paymentWallet = ''
        this.outSearchForm.payeePhone = ''
        this.outSelectDate = []
        this.$refs.regionOut.addr = [];
        this.outSearchForm.regionId = ''
        this.getOutDataList()
      },
      handleResetIn() {
        this.inSearchForm.pageNumber = 1 // 当前页数
        this.inSearchForm.pageSize = 10 // 页面大小
        this.inSearchForm.startTime = "" // 起始时间
        this.inSearchForm.endTime = "" // 终止时间
        this.inSearchForm.payeeGradeName = ''
        this.inSearchForm.paymentWallet = ''
        this.inSearchForm.payeePhone = ''
        this.inSelectDate = []
        this.$refs.regionIn.addr = [];
        this.inSearchForm.regionId = ''
        this.getInDataList()
      },
      getInDataList() {
        PlantTransferList({
          ...this.inSearchForm,
          type: 'in'
        }).then((res) => {
          if (res.result && res.result.records) {
            this.inLoading = false;
            this.inData = res.result.records;
            this.inTotal = res.result.total;
          }
        });
      },
      getOutDataList() {
        PlantTransferList({
          ...this.outSearchForm,
          type: 'out'
        }).then((res) => {
          if (res.result && res.result.records) {
            this.outLoading = false;
            this.outData = res.result.records;
            this.outTotal = res.result.total;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .search {

    /deep/.ivu-card-body,
    .ivu-tabs {
      height: 100%;
    }

    .div-content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;

      .div-item {
        line-height: 35px;
        display: flex;
        float: left;
        margin-right: 25px;
        font-size: 16px;
        font-weight: 600;

        >.div-item-left {}

        >.div-item-right {
          flex: 1;
          word-break: break-all;
        }
      }
    }
  }
</style>
